<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<style>
		*{
		margin:0;padding:0;
	}	
	body{
		width:100vw;
		height:100vh;
		background-color:#23262E;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#iphonex_wrap{
		width:360px;
		height:722px;
		background-image: url(img/iphonex-outline.png);
		background-size:100% 100%;
		background-repeat: no-repeat;
		margin-top:75px;
		background-color: #EEE;
		position: relative;
	}
	#myCanvas{
		width:93%;
		margin:0 auto;
		position: absolute;
		top: 28px;
	}
	.phone_div{
		width:900px;
		height:900px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		border: 1px solid transparent;
		background-color: #FFF;
		position:relative;
	}
</style>
	<body>
		<div class="phone_div">
			<h1 style="position: absolute;top:54px;font-style: italic;">LockingReal - GeekReal<h1>
			<div id="iphonex_wrap">
				<canvas id="myCanvas" width="358" height="720"></canvas>
			</div>
		</div>
	</body>
	<script type="application/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		Array.prototype.shuffle = function() {
			var array = this;
			var m = array.length,
				t, i;
			while (m) {
				i = Math.floor(Math.random() * m--);
				t = array[m];
				array[m] = array[i];
				array[i] = t;
			}
			return array;
		}
		function RandomNumBoth(Min,Max){
		      var Range = Max - Min;
		      var Rand = Math.random();
		      var num = Min - Math.round(Rand * Range); //四舍五入
		      return num;
		}
		let colors = ['#F24592', '#36129A', '#FDFB39', '#5DB7EE', '#E74C45', '#E5243F'];
		colors.shuffle();	
		function doDraw() {
			let ran1 = RandomNumBoth(-10,20);
			let ran2 = RandomNumBoth(-5,5);
			// var can = document.getElementById("myCanvas");
			let styleText = "filter:blur(36px) hue-rotate("+ran1+"deg);";
			c.style=styleText;

			let r1 = 180+ran2;
			let r2 = 360+ran2;
			let clist = colors.shuffle();
			ctx.strokeStyle = 'rgba(255,255,255,0)';
			ctx.beginPath();
			ctx.moveTo(30, 36);
			ctx.bezierCurveTo(30, 140, r1, 800, 170, 47);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[0];
			ctx.fill();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(170, 47);
			ctx.bezierCurveTo(180, 140,r1, 800, 336, 60);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[1];
			ctx.fill();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.moveTo(30, 686);
			ctx.bezierCurveTo(180, 140,r1, 400, 180, 698);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[2];
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();

			ctx.moveTo(180, 700);
			ctx.bezierCurveTo(230, 140,r1, 400, 332, 684);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[3];
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			
			// hue-rotate(
			// 40deg
			// )
			ctx.moveTo(25, 200);
			ctx.bezierCurveTo(25,440, 500,r2, 30, 500);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[4];
			ctx.fill();
			ctx.closePath();
			
			ctx.beginPath();	
			ctx.moveTo(336, 100);
			ctx.bezierCurveTo(336,240,100,r2, 336, 600);
			ctx.stroke();
			ctx.globalCompositeOperation = 'source-over';
			ctx.fillStyle = clist[5];
			ctx.fill();
			ctx.closePath();
		}
		setInterval(()=>{
			ctx.clearRect(0,0,c.width,c.height);
			doDraw();
		},2000);
		// ctx.moveTo(30,686);
		// ctx.bezierCurveTo(180,140,180,400,180,698);
		// ctx.stroke();

		// ctx.globalCompositeOperation = 'source-over';
		// ctx.moveTo(200,700);
		// ctx.bezierCurveTo(230,140,260,400,336,608);
		// ctx.stroke();

		// ctx.globalCompositeOperation = 'source-over';
	</script>
</html>
